pre,
code {
  font-family: 'Inconsolata', monospace;
  border-radius: 4px;
}

code {
  padding: 1px 5px;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;

  > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

.highlighter-rouge {
  background-color: #f5f7f9;
  word-wrap: break-word;
}

.hl-caption {
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 0px;
  background-color: #f0f3f6;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-bottom: 0px;
  padding-left: 1em;
  border-bottom: 1px solid $separator-color;
  font-size: 11pt;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  p {
    margin-bottom: 0;
    padding: 2px 0;
    font-family: 'Inconsolata', monospace;
    line-height: 1.8;
  }

  .copy {
    margin-left: auto;
    margin-right: $spacing / 2;
    align-self: center;

    #copy-indicator {
      opacity: 0;
      transition: opacity 200ms ease-in;
      background-color: #f0f3f6;

      &.success {
        opacity: 1;
        color: #60819f;
      }

      &.error {
        opacity: 1;
        color: red;
      }
    }

    #copy-button {
      color: #90a7bc;
    }
  }
}

.highlight {
  background-color: #f5f7f9;
  box-shadow: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #3c454d;

  .c, .c1, .cm { color: #a0a3a6; }
  .k, .kd, .kr, .kt, .nl { color: #2c77a6; }
  .o, .p, .kc, { color: #cf556a; }
}

kbd {
  border-radius: 4px;
  border: 1px solid #d0d3d6;
  padding: 1px 6px;
  font-size: 10pt;
}
